<template>
  <div class="script-select">
    <div class="header">
      <button class="back-btn" @click="goBack">← 返回</button>
      <h2>选择剧本</h2>
      <div class="header-right"></div>
    </div>

    <div class="content">
      <div v-if="loading" class="loading">加载中...</div>

      <div v-else>
        <div class="info-text">
          <p>请选择一个剧本开始游戏</p>
        </div>

        <div class="scripts-list">
          <div
            v-for="script in scripts"
            :key="script.id"
            class="script-card"
            :class="{ selected: selectedScript?.id === script.id }"
            @click="selectScript(script)"
          >
            <div class="script-header">
              <h3>{{ script.name }}</h3>
              <span class="script-badge">{{ script.roleCount }}人</span>
            </div>
            <p class="script-description">{{ script.description }}</p>
            <div class="script-info">
              <span class="info-tag">角色数: {{ script.roleCount }}</span>
            </div>
          </div>
        </div>

        <div class="actions">
          <button
            class="btn btn-primary"
            @click="createRoom"
            :disabled="!selectedScript"
          >
            创建房间
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

export default {
  name: "ScriptSelect",
  setup() {
    const router = useRouter();
    const scripts = ref([]);
    const loading = ref(true);
    const selectedScript = ref(null);

    const loadScripts = async () => {
      try {
        loading.value = true;
        const response = await axios.get("/api/scripts");
        if (response.data.success) {
          scripts.value = response.data.scripts;
        }
      } catch (error) {
        console.error("加载剧本列表失败:", error);
      } finally {
        loading.value = false;
      }
    };

    const selectScript = (script) => {
      selectedScript.value = script;
    };

    const createRoom = async () => {
      if (!selectedScript.value) {
        return;
      }

      try {
        const response = await axios.post("/api/rooms/create", {
          scriptId: selectedScript.value.id,
        });
        if (response.data && response.data.success) {
          router.push(`/room/${response.data.roomId}`);
        } else {
          alert("创建房间失败，服务器返回异常");
        }
      } catch (error) {
        console.error("创建房间失败:", error);
        if (error.response) {
          alert(
            `创建房间失败: ${error.response.status} - ${
              error.response.data?.message || error.message
            }`
          );
        } else if (error.request) {
          alert("无法连接到服务器，请确保后端服务正在运行");
        } else {
          alert(`创建房间失败: ${error.message}`);
        }
      }
    };

    const goBack = () => {
      router.push("/");
    };

    onMounted(() => {
      loadScripts();
    });

    return {
      scripts,
      loading,
      selectedScript,
      selectScript,
      createRoom,
      goBack,
    };
  },
};
</script>

<style scoped>
.script-select {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header h2 {
  font-size: 20px;
  font-weight: 600;
}

.back-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 16px;
  cursor: pointer;
  padding: 5px 10px;
}

.header-right {
  width: 60px;
}

.content {
  padding: 20px;
}

.loading {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.info-text {
  text-align: center;
  margin-bottom: 30px;
  color: #666;
}

.info-text p {
  font-size: 16px;
}

.scripts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.script-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.script-card:active {
  transform: scale(0.98);
}

.script-card.selected {
  border-color: #667eea;
  background: #f0f4ff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.script-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.script-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.script-badge {
  padding: 4px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.script-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.script-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.info-tag {
  padding: 4px 10px;
  background: #f0f0f0;
  border-radius: 8px;
  font-size: 12px;
  color: #666;
}

.actions {
  position: sticky;
  bottom: 0;
  padding: 20px 0;
  background: #f5f5f5;
}

.btn {
  width: 100%;
  padding: 16px 32px;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:active:not(:disabled) {
  background: #5568d3;
  transform: scale(0.98);
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>

